<template>
  <div>
    <h3>参保人员管理</h3>

    <!-- 查询功能 -->
    <el-input v-model="searchQuery" placeholder="请输入参保ID进行查询" style="width: 300px; margin-bottom: 20px;" clearable></el-input>
    <el-button type="primary" @click="fetchInsuredPersonsid">查询</el-button>
    <el-button type="primary" @click="refreshPage">刷新</el-button> <!-- 新增刷新按钮 -->

    <!-- 添加参保人员按钮 -->
    <el-button type="primary" @click="openDialog(null)">添加参保人员</el-button>

    <!-- 参保人员列表 -->
    <el-table :data="insuredPersonList" style="width: 100%">
      <el-table-column prop="insuredpersonid" label="参保人员ID/身份证" width="180">
        <template v-slot="scope">
          {{ scope.row.insuredpersonid || '无' }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
        <template v-slot="scope">
          {{ scope.row.name || '无' }}
        </template>
      </el-table-column>
      <el-table-column prop="gender" label="性别" width="80">
        <template v-slot="scope">
          {{ scope.row.gender === 'M' ? '男' : (scope.row.gender === 'F' ? '女' : '无') }}
        </template>
      </el-table-column>
      <el-table-column prop="insurancestatus" label="参保状态" width="120">
        <template v-slot="scope">
          {{ scope.row.insurancestatus || '无' }}
        </template>
      </el-table-column>

      <!-- 操作列 -->
      <el-table-column label="操作" width="180">
        <template v-slot="scope">
          <el-button size="small" type="primary" @click="openDialog(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteInsuredPerson(scope.row.insuredpersonid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑参保人员对话框 -->
    <el-dialog :title="dialogTitle"  v-model="dialogVisible">
      <el-form :model="insuredPersonForm" label-width="120px">
        <el-form-item label="身份证/参保人ID">
          <el-input v-model="insuredPersonForm.insuredpersonid" :disabled="isEditing"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="insuredPersonForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="insuredPersonForm.gender">
            <el-radio label="M">男</el-radio>
            <el-radio label="F">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="家庭住址">
          <el-input v-model="insuredPersonForm.address"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="insuredPersonForm.contactnumber"></el-input>
        </el-form-item>
        <el-form-item label="参保状态">
          <el-select v-model="insuredPersonForm.insurancestatus" placeholder="请选择状态">
            <el-option label="有效" value="1"></el-option>
            <el-option label="无效" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveInsuredPerson">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      searchQuery: '',
      insuredPersonList: [],
      insuredPersonForm: {
        insuredpersonid: '',
        name: '',
        gender: 'M',
        address: '',
        contactnumber: '',
        insurancestatus: ''
      },
      dialogVisible: false,
      dialogTitle: '',
      isEditing: false
    };
  },
  computed: {
    filteredInsuredPersons() {
      return this.insuredPersonList.filter(person =>
          (person.name && person.name.toLowerCase().includes(this.searchQuery.toLowerCase())) ||
          (person.insurancestatus && person.insurancestatus.includes(this.searchQuery))
      );
    }
  },
  methods: {
    fetchInsuredPersons() {
      axios.get('http://localhost:8081/insuredPerson/all')
          .then(response => {
            this.insuredPersonList = response.data.map(person => ({
              insuredpersonid: person.insuredpersonid || '无',
              name: person.name || '无',
              gender: person.gender || '无',
              address: person.address || '无',
              contactnumber: person.contactnumber || '无',
              insurancestatus: person.insurancestatus || '无'
            }));
          })
          .catch(error => {
            console.error("Error fetching insured persons:", error);
          });
    },

    fetchInsuredPersonsid() {
      if (!this.searchQuery) {
        alert("请输入参保ID进行查询");
        return;
      }
      axios.get(`http://localhost:8081/insuredPerson/get/${this.searchQuery}`)
          .then(response => {
            const person = response.data;
            this.insuredPersonList = [{
              insuredpersonid: person.insuredpersonid || '无',
              name: person.name || '无',
              gender: person.gender || '无',
              address: person.address || '无',
              contactnumber: person.contactnumber || '无',
              insurancestatus: person.insurancestatus || '无'
            }];
          })
          .catch(error => {
            console.error("Error fetching insured person by ID:", error);
          });
    },

    refreshPage() {
      this.searchQuery = '';
      this.fetchInsuredPersons();
    },

    openDialog(row) {
      if (row) {
        this.isEditing = true;
        this.dialogTitle = '编辑参保人员';
        this.insuredPersonForm = {...row};
      } else {
        this.isEditing = false;
        this.dialogTitle = '添加参保人员';
        this.resetForm();
      }
      this.dialogVisible = true;
    },

    resetForm() {
      this.insuredPersonForm = {
        insuredpersonid: '',
        name: '',
        gender: 'M',
        address: '',
        contactnumber: '',
        insurancestatus: ''
      };
    },

    saveInsuredPerson() {
      if (this.isEditing) {
        axios.put(`http://localhost:8081/insuredPerson/update`, this.insuredPersonForm)
            .then(() => {
              this.fetchInsuredPersons();
              this.dialogVisible = false;
            })
            .catch(error => {
              console.error("Error updating insured person:", error);
            });
      } else {
        axios.post('http://localhost:8081/insuredPerson/register', this.insuredPersonForm)
            .then(() => {
              this.fetchInsuredPersons();
              this.dialogVisible = false;
            })
            .catch(error => {
              console.error("Error adding insured person:", error);
            });
      }
    },

    deleteInsuredPerson(insuredpersonid) {
      axios.delete(`http://localhost:8081/insuredPerson/delete/${insuredpersonid}`)
          .then(() => {
            this.fetchInsuredPersons();
          })
          .catch(error => {
            console.error("Error deleting insured person:", error);
          });
    }
  },

  mounted() {
    this.fetchInsuredPersons();
  }
};
</script>

<style scoped>
.el-button {
  margin-bottom: 20px;
}

.dialog-footer {
  text-align: right;
}
</style>
